<template>
	<Layout>
		<template #title>律所详情</template>
		<view class="law-intro">
			<view class="law-intro__portrait aspect-fill">
				<image mode="aspectFill" :src="detail.lawFirmLogo"></image>
			</view>
			<view class="law-intro__info">
				<view class="law-intro__info__title">
					<view class="ellipsis" style="max-width:400rpx;">
						{{detail.lawFirmName}}
					</view>
					<view class="tag">律所</view>
				</view>
				<view class="law-intro__info__desc">
					{{detail.certification == 1 ? '执业认证':'未认证'}}
				</view>
				<view class="law-intro__info__desc fans">
					粉丝：{{detail.followers}}
				</view>
			</view>
		</view>

		<InfoBlock standard header customStyle="margin-top:40rpx;" @editClick="tapEditFile">
			<template #header>律所档案</template>

			<view class="law-record">
				<view class="law-record__desc">
					<view class="tag">擅长</view>
					<view class="law-record__desc__content">{{detail.special}}</view>
				</view>
				<view class="law-record__desc">
					<view class="tag">简介</view>
					<view class="law-record__desc__content">
						<view class="ellipsis-line-clamp">{{detail.lawFirmDesc}}</view>
					</view>
				</view>

				<view class="law-record__location">
					<view class="law-record__location__desc">
						<image class="inline-flex location-icon" src="/static/image/lawyer/location.png"></image>
						{{detail.lawFirmAddress}}
					</view>
				</view>
			</view>
		</InfoBlock>

		<SectionTitle showRight :customStyle="{marginTop:'50rpx'}" @editClick="tapToCase">
			<template #title>律所案例</template>
		</SectionTitle>

		<view v-for="item of caseList" :key="item.id" class="lawyer-case">
			<view class="lawyer-case__box">
				<view class="lawyer-case__image aspect-fill">
					<image mode="aspectFill" :src="item.caseImage"></image>
				</view>
				<view class="lawyer-case__intro">
					<view class="ellipsis-line-clamp">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>

		<SectionTitle showRight :customStyle="{marginTop:'50rpx'}" @editClick="tapAllLawyerList">
			<template #title>推荐律师</template>
		</SectionTitle>

		<view class="inline-flex fill jcsb recommend-lawyer-section">
			<view v-for="item of lawyerList" :key="item.lawFirmId" class="inline-flex column recommend-lawyer">
				<view class="recommend-lawyer__image aspect-fill">
					<image mode="aspectFill" :src="item.avatar"></image>
				</view>
				<view class="recommend-lawyer__leading">
					<image src="/static/image/law/leading-lawyer.png"></image>
					<view>金牌{{item.lawFirmType == 1? '律师':'律所'}}</view>
				</view>
				<view class="inline-flex column fill aic recommend-lawyer__info">
					<view class="iflex jcc recommend-lawyer__info__name">
						<view class="ellipsis">{{item.lawyerName}}</view>
					</view>
					<view class="recommend-lawyer__info__other">
						执业{{item.practice}}年
						<text>|</text>
						咨询人数{{item.consultation}}人
					</view>
					<view class="recommend-lawyer__info__advantage">
						<text>{{item.special}}</text>
					</view>
				</view>
			</view>
		</view>



		<SectionTitle showRight :customStyle="{marginTop:'50rpx'}" @editClick="tapAllLawHonor">
			<template #title>律所荣誉</template>
		</SectionTitle>

		<view class="law-honor-section">
			<view v-for="item of honorList" :key="item.awardId" class="lawyer-honor">
				<view class="lawyer-honor__image aspect-fill">
					<image mode="aspectFill" :src="item.awardImage"></image>
				</view>
				<view class="lawyer-honor__intro ellipsis">{{item.awardContent}}</view>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts" name="LawDetail">
	import Layout from '@/components/layout/layout.vue';
	import InfoBlock from '@/components/info-block/info-block.vue';
	import SectionTitle from '@/components/section-title/section-title.vue';
	import { getLawfirmDetail, getLawfirmCaseList, getLawfirmAwardList, getLawyerListOfLaw } from '@/apis/lawfirm';
	import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import type { AnyObj } from '@/types/global';

	let lawFirmId = '';
	const detail = ref<AnyObj>({});
	const caseList = ref<AnyObj[]>([]);
	const honorList = ref<AnyObj[]>([]);
	const lawyerList = ref<AnyObj[]>([]);

	function loadData() {
		getLawfirmDetail(lawFirmId).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			detail.value = res.data ?? {};
		});

		getLawfirmCaseList(lawFirmId).then((res) => {
			caseList.value = res.rows ?? [];
		});

		getLawfirmAwardList(lawFirmId).then((res) => {
			honorList.value = res.rows ?? [];
		});

		getLawyerListOfLaw(lawFirmId).then((res) => {
			lawyerList.value = (res.rows ?? []).slice(0, 2);
		});
	}

	function tapEditFile() {
		uni.navigateTo({
			url: `/pages-lawyer/lawyer-edit-file/lawyer-edit-file?lawFirmId=${lawFirmId}`
		})
	}

	function tapToCase() {
		uni.navigateTo({
			url: `/pages-lawyer/law-case/law-case?lawFirmId=${lawFirmId}`
		})
	}

	function tapAllLawHonor() {
		uni.navigateTo({
			url: `/pages-lawyer/law-honor/law-honor?lawFirmId=${lawFirmId}`
		})
	}

	function tapAllLawyerList() {
		uni.navigateTo({
			url: `/pages-lawyer/law-lawyer-list/law-lawyer-list?lawFirmId=${lawFirmId}`
		})
	}


	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	onLoad((options) => {
		options = options as { lawFirmId : string; }
		lawFirmId = options.lawFirmId;
	});
	onShow(() => {
		loadData();
	});
</script>

<style lang="scss">
	.law-intro {
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-self: center;
		width: 100%;
		width: 690rpx;
		height: 212rpx;
		padding: 32rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(178deg, #FFF1E6 0%, #FFFFFF 51%);
		border-radius: 8rpx;
		border: 4rpx solid #FFFFFF;

		&__portrait {
			display: inline-flex;
			flex-shrink: 0;
			width: 148rpx;
			height: 148rpx;
			border-radius: 8rpx;
		}

		&__info {
			position: relative;
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;
			flex-shrink: 0;
			width: 454rpx;
			height: 148rpx;

			.follow {
				position: absolute;
				right: 0;
				top: 0;
			}

			&__title {
				display: inline-flex;
				align-items: center;
				width: 100%;
				height: 50rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #000000;
				line-height: 42rpx;

				.tag {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 64rpx;
					height: 36rpx;
					background: linear-gradient(156deg, #FFB681 0%, #FF8024 100%);
					border-radius: 8rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					margin-left: 12rpx;
				}
			}

			&__desc {
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #929292;
				line-height: 33rpx;

				&.fans {
					font-size: 24rpx;
					color: #B5B5B5;
					line-height: 28rpx;
				}
			}
		}
	}

	.law-record {
		display: inline-flex;
		flex-direction: column;
		width: 100%;
		flex-shrink: 0;
		box-sizing: border-box;

		.tag {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 40rpx;
			background: #FBE8DA;
			border-radius: 4rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF710A;
		}

		&__desc {
			display: inline-flex;
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #101010;
			line-height: 33rpx;

			&:nth-child(2) {
				margin-top: 46rpx;
			}

			&__content {
				display: flex;
				flex: 1;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 28rpx;
				color: #101010;
				line-height: 40rpx;
			}

			.ellipsis-line-clamp {}
		}

		&__location {
			display: inline-flex;
			flex-direction: column;
			width: 100%;
			padding: 20rpx;
			margin-top: 40rpx;
			box-sizing: border-box;
			background: rgba(217, 217, 217, 0.12);
			border-radius: 8rpx;

			&__desc {
				display: inline-flex;
				align-items: center;
				width: 100%;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4B4B4B;
				line-height: 33rpx;

				&:last-child {
					margin-top: 28rpx;
				}
			}
		}
	}

	.law-honor-section {
		display: inline-flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.recommend-lawyer-section {
		padding: 32rpx;
	}
</style>